<template>
    <!--    <Header></Header>-->
    <div>
        <div class="ep-content" v-loading="loading">
            <div class="epc-card" v-for="(item, index) in list" @click="showDetail(item)">
                <div class="epc-img">
                    <img :src="item.coverUrl">
                </div>
                <div class="epc-card-right">
                    <div class="epc-title">{{ item.title }}</div>
                    <div class="epc-des">
                        {{ item.des }}
                    </div>
                    <div class="card-line">
                        <div class="epc-type">Video Type</div>
                        <div class="ep-heng">-</div>
                        <div class="epc-date">{{ dateFilter(item.publishTime, "MM/dd/yyyy") }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="pagination-box">
                <el-pagination :page-size="query.size"
                               :background="false"
                               layout="prev, pager, next"
                               :total="query.total"
                               @current-change="handleChange"/>
            </div>
        </div>
        <div class="dialogContent">
            <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
                <VideoDetail :resourceUrl="currentItem.resourceUrl"
                             :title="currentItem.title"
                             :des="currentItem.des"
                             :publishTime="currentItem.publishTime"></VideoDetail>
            </el-dialog>
        </div>
    </div>
    <!--    <Footer></Footer>-->
</template>

<script setup lang="ts">
    useHead({
        title: 'Exeed Newsroom',//网站标题
        link: [//网站link，可以在这里引入css和icon等
            {rel: 'shortcut icon', href: '/images/favicon.ico'},
            {rel: 'apple-touch-icon', href: '/images/favicon.ico'}
        ]
    })

    const props = defineProps({
        update: {
            type: Function,
            required: true
        }
    });

    const dialogVisible = ref(false);

    const config = useRuntimeConfig();
    const apiURL = config.public.apiURL;
    const hostURL = config.public.hostURL;
    const route = useRoute()
    const token = route.query.token;

    const loading = ref(true)
    const currentItem = ref();
    const showDetail = (item) => {
        dialogVisible.value = true;
        currentItem.value = item;
    }
    const query = ref({
        page: 1,
        size: 10,
        total: 0,
        key: ''
    })
    if (token) {
        query.value.token = token;
    }
    const list = ref()

    const getContent = (key: string) => {
        list.value = [];
        loading.value = true;
        // if (route.query.key) {
        //     query.value.key = <string>route.query.key;
        // }
        // if (key) {
        //     query.value.key = key;
        // }
        if (!key){
            key = ""
        }
        query.value.key = key;

        // const {data: content} = await useFetch(`/api/resource/selectVideoPages`, {
        //   query: query.value
        // });
        // const {data: content, pending, error, refresh} = await useAsyncData(
        //     'videotab',
        //     () => $fetch(`/api/resource/selectVideoPages`, {
        //         query: query.value
        //     })
        // )
        // if (content.value && content.value.data && content.value.code === 200) {
        //     query.value.page = content.value.data.page;
        //     if (content.value.data.total) {
        //         query.value.total = Number(content.value.data.total);
        //     }
        //     list.value = content.value.data.list;
        //     props.update("video", query.value.total)
        // }
        // loading.value = false;

        $fetch(`/api/resource/selectVideoPages`, {
            method: 'GET',
            query: query.value
        }).then(response => {
            if (response.code == 200) {
                if (response.data ) {
                    query.value.page = response.data.page;
                    if (response.data.total) {
                        query.value.total = Number(response.data.total);
                    }
                    list.value = response.data.list;
                    props.update("video", query.value.total)
                }
            }
            loading.value = false;
        }).catch(error => {
            loading.value = false;
            console.error('Error fetching posts:', error);
        });

    }

    const handleChange = (page: number) => {
        query.value.page = page;
        getContent("");
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    }

    // getContent("");

    defineExpose({getContent});
</script>

<style scoped lang="scss">
    .ep-content {
        width: 1680px;
        justify-content: space-between;
        padding: 0px 100px;
        // margin-bottom: 10px;
        min-height: 1000px;

        .epc-card {
            cursor: pointer;
            overflow: hidden;
            display: inline-flex;
            padding: 20px 0;
            margin-right: 68px;

            .epc-img {
                width: 506px;
                height: 311px;
                overflow: hidden;
                background-color: rgb(202, 201, 201);

                img {
                    width: 506px;
                    height: 311px;
                    object-fit: cover;
                    transition: all 0.6s;
                }
            }

            .epc-card-right {
                height: 226px;
                padding-left: 68px;

                .epc-title {
                    font-size: 24px;
                    height: 60px;
                    line-height: 60px;
                    font-weight: 600;
                    width: 1020px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .epc-des {
                    font-size: 16px;
                    width: 1020px;
                    height: 200px;
                    line-height: 24px;
                    // font-weight: 600;
                }

                .card-line {

                    display: inline-flex;
                    height: 60px;

                    .epc-type {
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 60px;
                        color: #C78E66;
                    }

                    .ep-heng {
                        width: 12px;
                        margin: 0 9px;
                        line-height: 60px;
                        // border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                        font-size: 20px;

                    }

                    .epc-date {
                        width: 89px;
                        // text-align: center;
                        height: 21px;
                        font-size: 16px;
                        line-height: 60px;
                    }

                }
            }
        }

        .epc-card:hover .epc-img img {
            transform: scale(1.05);
        }


    }

    .pagination-box {
        //position: relative;
        margin-top: 20px;
        margin-left: 1400px;
        padding-bottom: 30px;

        :deep(.el-pagination) {
            //width: 100px;
            --el-pagination-button-width: 0px;
            --el-pagination-button-height: 0px;
        }

        :deep(.number) {
            font-size: 18px;
        }

        :deep(svg) {
            width: 18px;
            height: 18px;
        }

        :deep(.el-icon) {
            line-height: unset;
        }

        :deep(button) {
            background: none;
            height: 30px;
            width: 50px;
            padding: 0 4px;
        }

        :deep(.el-pager li ) {
            height: 30px;
            width: 20px;
            background: none;
        }
    }

    .dialogContent {
        :deep(.el-dialog) {
            width: 1024px;
            padding: 0px;
        }

        :deep(.el-dialog__header) {
            display: none;
        }

        :deep(.el-dialog__footer) {
            padding: 10px;
            padding-left: 32px;

        }


    }

</style>
